<template>
  <div class="body_all">
    <div class="ba_top">
      <div>
        <el-input
          class="nameInput"
          v-model="searchList.name"
          placeholder="请输入姓名"
          size="mini"
        ></el-input>
        <el-button
          style="margin-left: 8px"
          type="primary"
          icon="el-icon-search"
          size="mini"
          >搜索</el-button
        >
        <el-button
          type="refresh"
          icon="el-icon-refresh"
          @click="btnRefresh"
          size="mini"
          >重置</el-button
        >
      </div>
    </div>
    <div class="ba_main">
      <div>
        <el-container
          style="border-right: 1px solid #eee; border-top: 1px solid #eee"
        >
          <el-aside width="200px">
            <el-menu :default-openeds="['1']">
              <el-submenu index="1">
                <template slot="title">
                  <h4 style="display: inline">预设角色</h4>
                </template>
                <el-menu-item
                  v-for="(item, i) in labelList"
                  :key="i"
                  :index="'' + i"
                  >{{ item }}</el-menu-item
                >
              </el-submenu>
            </el-menu>
            <el-menu :default-openeds="['1']">
              <el-submenu index="1">
                <template slot="title">
                  <h4 style="display: inline"><i class="el-icon-plus" @click.stop="addData()"></i>自定义角色</h4>
                </template>
                <el-menu-item
                  v-for="(item, i) in labelList"
                  :key="i"
                  :index="'' + i"
                  >{{ item }}</el-menu-item
                >
              </el-submenu>
            </el-menu>
          </el-aside>

          <el-container>
            <el-main style="margin-left: 15px">
              <el-table
                :data="tableData"
                style="width: auto"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="date" label="姓名"> </el-table-column>
                <el-table-column prop="name" label="所属部门">
                </el-table-column>
                <el-table-column prop="name" label="管理部门">
                </el-table-column>
                <el-table-column prop="name" label="注册手机号">
                </el-table-column>
                <el-table-column prop="name" label="启动SCRM系统">
                </el-table-column>
                <el-table-column prop="name" label="开启会话存档功能">
                </el-table-column>
                <el-table-column prop="name" label="角色"> </el-table-column>
                <el-table-column prop="name" label="SCRM助手">
                </el-table-column>
                <el-table-column label="操作" width="250" flex="right">
                  <template slot-scope="scope">
                    <span class="edit_btn" @click="dialogAdministration(scope.row)"
                      >修改管理部门</span
                    >
                    <span
                      class="edit_btn"
                      style="margin-left: 10px"
                      @click="editerData(scope.row.id)"
                      >修改角色</span
                    >
                    <span
                      class="edit_btn"
                      style="margin-left: 10px"
                      @click="delData(scope.row.id)"
                      >移除</span
                    >
                  </template>
                </el-table-column>
              </el-table>
              <div class="footerPage">
                <i class="el-icon-arrow-left"></i>
                <i class="el-icon-arrow-right"></i>
              </div>
            </el-main>
          </el-container>
        </el-container>
      </div>
    </div>
    <!-- 详情 -->
    <el-dialog
      title="修改管理部门"
      :visible.sync="dialogDetails"
      width="45%"
      :close-on-press-escape="false"
    >
      <div class="dialogDiv">
        <el-form
          :model="sourceData"
          :rules="rulesSource"
          ref="sourceData"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="管理部门">
            <el-select v-model="searchList.groupLeader" placeholder="请选择">
              <el-option
                v-for="item in leaderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot_btn">
        <el-button @click="resetAdministrationSource('sourceData')">取消</el-button>
        <el-button type="primary" @click="submitAdministrationSource('sourceData')"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <!-- 新增角色 -->
    <el-dialog
      title="自定义角色"
      :close-on-click-modal="false"
      :visible.sync="sourceAdd"
      width="45%"
      :close-on-press-escape="false"
    >
      <div class="dialogDiv">
        <el-form
          :model="sourceData"
          :rules="rulesSource"
          ref="sourceData"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色名称" prop="name">
            <el-input
              v-model="sourceData.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot_btn">
        <el-button @click="resetAddSource('sourceData')">取消</el-button>
        <el-button type="primary" @click="submitAddSource('sourceData')"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      title="修改角色"
      :close-on-click-modal="false"
      :visible.sync="sourceEditer"
      width="45%"
      :close-on-press-escape="false"
    >
      <div class="dialogDiv">
        <el-form
          :model="sourceData"
          :rules="rulesSource"
          ref="sourceData"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="sourceData.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属部门">
            <el-select v-model="searchList.groupLeader" placeholder="请选择">
              <el-option
                v-for="item in leaderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册手机号" prop="name">
            <el-input
              v-model="sourceData.name"
              placeholder="请输入注册手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="员工分组">
            <el-select v-model="searchList.groupLeader" placeholder="请选择">
              <el-option
                v-for="item in leaderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="直属上级">
            <el-select v-model="searchList.groupLeader" placeholder="请选择">
              <el-option
                v-for="item in leaderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否可登陆系统">
            <el-switch v-model="sourceData.start"> </el-switch>
          </el-form-item>
          <el-form-item label="是否占用license">
            <el-switch v-model="sourceData.start"> </el-switch>
          </el-form-item>
          <el-form-item label="开启会话存档功能">
            <el-switch v-model="sourceData.start"> </el-switch>
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="searchList.groupLeader" placeholder="请选择">
              <el-option
                v-for="item in leaderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot_btn">
        <el-button @click="resetSource('sourceData')">取消</el-button>
        <el-button type="primary" @click="submitSource('sourceData')"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // 搜索条件
      searchList: {
        name: "",
        phone: "",
      },
      leaderList: [
        {
          lable: "d",
          value: 1,
        },
      ],
      sourceAdd:false, // 新增角色
      sourceEditer: false,
      dialogDetails: false,
      sourceData: {
        name: "",
        start: 0,
      },
      rulesSource: {
        name: [{ required: true, message: "请输入来源", trigger: "blur" }],
      },
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      //   标签
      labelSearch: "",
      labelList: ["销售部", "技术部"],
    };
  },
  created() {},
  methods: {
    // 条件重置
    btnRefresh() {
      this.searchList = this.$options.data().searchList;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 修改管理部门
    dialogAdministration(obj) {
      this.dialogDetails = true;
    },
    resetAdministrationSource(formName) {
      this.$refs[formName].resetFields();
      this.dialogDetails = false;
      this.sourceData = this.$options.data().sourceData;
    },
    submitAdministrationSource(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.dialogDetails = false;
          this.sourceData = this.$options.data().sourceData;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新增
    addData(){
        this.sourceAdd =true;
    },
    resetAddSource(formName) {
      this.$refs[formName].resetFields();
      this.sourceAdd = false;
      this.sourceData = this.$options.data().sourceData;
    },
    submitAddSource(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.sourceAdd = false;
          this.sourceData = this.$options.data().sourceData;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 编辑
    editerData(obj) {
      this.sourceEditer = true;
    },
    resetSource(formName) {
      this.$refs[formName].resetFields();
      this.sourceEditer = false;
      this.sourceData = this.$options.data().sourceData;
    },
    submitSource(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.sourceEditer = false;
          this.sourceData = this.$options.data().sourceData;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    delData() {
      this.$confirm("此操作将移除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "移除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>
<style scoped>
.labelType {
  display: flex;
}
.labelType .label {
}
.labelType .table {
  flex-grow: 1;
}
</style>